<!DOCTYPE html>

<style type="text/css">
    body {
        height: 400px;
        width: 400px;
        overflow: scroll;
    }

    body > div {
        height: 1000px;
        width: 1000px;
    }
</style>

<body>
    <div> </div>
</body>

<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script type="text/javascript">
'use strict';

eventSender.mouseMoveTo(10, 10);

const testCases = {
    'contextmenu': _ => eventSender.gestureTwoFingerTap(10, 10), // contextmenu event dispatched as a result of two finger tap
    'scroll': _ => document.scrollingElement.scrollTop = 400  // scroll dispatched as a result of scrolling (with 100ms delay)
};

for (let eventName in testCases)
    createTest(eventName, testCases[eventName]);

function createTest(eventName, dispatchEventFn) {
    async_test(function(t) {
        let after, before;
        document.addEventListener(eventName, t.step_func(function(e) {
            after = performance.now();
            assert_greater_than_equal(e.timeStamp, before, "Event timestamp should be greater than performance.now() timestamp taken before its dispatch");
            assert_less_than_equal(e.timeStamp, after, "Event timestamp should be less than performance.now() timestamp taken after its dispatch");
            t.done();
        }));
        before = performance.now();
        dispatchEventFn();
    }, `Generated ${eventName} timestamp should be high resolution and have the same time origin as performance.now()`);
}
</script>
